<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>剪切板</title>
    <script src="../../lib/md5.js"></script>

    <script src="../../utils/utils.js"></script>
    <script src="../../lib/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../lib/element-ui/index.css"/>
    <link rel="stylesheet" href="../../lib/style.css"/>
    <!-- 引入组件库 -->
    <script src="../../lib/element-ui/index.js"></script>
    <script src="../../component/head/head.js"></script>
    <link rel="stylesheet" href="../../component/head/head.css"/>
    <style>
        .text {
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .key {
            width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: rgb(138, 127, 177);
            font-weight: 800;
            text-align: left;
        }

        .el-dialog__body {
            padding: 30px 10px;
        }
        .btn-group{
            display: flex;
            justify-content: flex-end;

        }
    </style>
</head>
<body class="backgrond">
<div id="edit">
    <div>
        <my-menu></my-menu>
    </div>
    <div id="main">
        <div class="back" @click="back">
            <i class="el-icon-back back">返回</i>
        </div>
        <div style="width: 100%">
            <div style="margin: 10px 0 10px 5px">
                <el-button
                        class="addBtn"
                        type="primary"
                        size="small"
                        @click="openAddTop"
                >添加顶级节点
                </el-button>
            </div>

            <el-tree
                    ref="SlotTree"
                    :props="defaultProps"
                    :data="setTree"
                    :expand-on-click-node="false"
                    highlight-current
                    :node-key="NODE_KEY"
            >
                <div class="comp-tr-node" slot-scope="{ node, data }">
                    <template>
                        <!-- 名称： 新增节点增加class（is-new） -->
                        <div style="display: flex">
                            <div v-if="data.name" class="key">
                                {{ data.name }} :
                            </div>
                            <div class="text">
                                {{
                                    data.name ?
                                            data.value.replace(`${data.name}: `, "")
                                            : data.value.replace(": ", "")
                                }}
                            </div>
                            <!-- 按钮 -->
                            <div class="comp-tr-node--btns">
                                <!-- 新增 -->
                                <el-button
                                        type="text"
                                        size="mini"
                                        @click="appendChild(node, data)"
                                >新增
                                </el-button
                                >

                                <!-- 编辑 -->
                                <el-button
                                        v-if="node.value != '剪切板'"
                                        size="mini"
                                        type="text"
                                        @click="handleEdit(node, data)"
                                >编辑
                                </el-button
                                >

                                <!-- 删除 -->
                                <el-button
                                        v-if="node.value != '剪切板'"
                                        size="mini"
                                        type="text"
                                        @click="handleDelete(node, data)"
                                >删除
                                </el-button
                                >
                            </div>
                        </div>
                    </template>
                </div>
            </el-tree>
            <el-dialog
                    :close-on-click-modal="false"
                    :visible.sync="addDialogVisible"
                    width="30%"
                    top="5vh"
                    :show-close="true"
                    :before-close="addHandleClose"
                    :title="addDialogTitle == 'edit' ? '编辑名称' : '新增名称'"
            >
                <el-form
                        :model="addForm"
                        :rules="addRules"
                        label-width="60px"
                        ref="addRef"
                >
                    <el-form-item label="value" prop="name">
                        <el-input
                                size="medium"
                                v-model="addForm.name"
                                placeholder="value"
                        />
                    </el-form-item>
                    <el-form-item label="标签" prop="key">
                        <el-input
                                size="medium"
                                v-model="addForm.key"
                                placeholder="标签"
                        />
                    </el-form-item>
                </el-form>
                <span class="dialog-footer btn-group">
                            <el-button size="small" @click="addHandleClose"
                            >取 消</el-button
                            >
                            <el-button
                                    size="small"
                                    type="primary"
                                    @click="addData"
                            >确 定</el-button
                            >
                        </span>
            </el-dialog>
        </div>

    </div>
    <script src="./index.js"></script>
</div>
</body>
</html>
